/*
--------------------------------------
GLOBAL RESET
--------------------------------------
 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/* remember to define focus styles! */
:focus { outline: 0; }

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

strong { font-weight: bold; }

article, aside, dialog,figure, footer, header, hgroup, menu, nav, section { display: block; }

/*
--------------------------------------------------
GLOBAL TYPE SIZES
--------------------------------------------------
 */

/*
    Default browser types size is 16px (assuming the user has not customized their settings).
    Assuming this default, we set the body to a font size of 62.5%, which effectively
    resets our default type size to 10px. From here, we can think of font-size in terms of
    pixels, but set font-size in ems. For example, 1em = 10px, 0.9em = 9px, 1.2em = 12px.
*/

body { 
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
} /* 10px */

h1, h2, h3, h4, h5, h6 {font-weight:normal;}

/*
--------------------------------------------------
LINKS
--------------------------------------------------
*/
a:link, a:visited { text-decoration: none; color: #0085c3; }
a:focus, a:active { outline: none; }
a:hover, a:focus  { text-decoration: underline; }



/*
--------------------------------------------------
GLOBAL CLASSES
--------------------------------------------------
 */

/*  Generic class for self-clearing block level elements with floated children */
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clear { min-height: 1%; zoom: 1; }


/*
--------------------------------------------------
FONT FACES
--------------------------------------------------
 */

@font-face {
  font-family: 'Calluna';
  src: url('calluna-regular-webfont.eot?') format('eot'),
       url('calluna-regular-webfont.woff') format('woff'),
       url('calluna-regular-webfont.ttf') format('truetype'),
       url('calluna-regular-webfont.svg#svgFontName') format('svg'),
}


/*
--------------------------------------------------
MIXINS
--------------------------------------------------
*/


.rounded_corners (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.linear_gradient(@start: #efefef, @end: #dcdcdc, @mode: repeat) {
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@start), to(@end));
    background-image: -webkit-linear-gradient(@start, @end);
    background-image: -moz-linear-gradient(0% 55% 90deg,@end, @start);
    background-repeat: @mode;
}

.box_shadow (@h: 0px, @v: 0px, @blur: 3px, @color: #aaa) {
    -webkit-box-shadow: @h @v @blur @color;
    -moz-box-shadow: @h @v @blur @color;
    box-shadow: @h @v @blur @color;
}

.transition(@property: all, @duration: 0.3s, @mode: linear, @delay: 0s) {
    -webkit-transition: @property @duration @mode @delay;
    -moz-transition: @property @duration @mode @delay;
    -o-transition: @property @duration @mode @delay;
    transition: @property @duration @mode @delay;
}


/*
--------------------------------------------------
STRUCTURE
--------------------------------------------------
*/

body {
  text-align: center;
  background-color: #e6e6e6;
  .linear_gradient(#fff, #e6e6e6, repeat-x);
}

#branding,
#content {
  width: 76em;
  margin: 0 auto;
  text-align: left;
}

#branding {
  margin-top: 80px;
  padding: 5px;
  background: #f1f2f3;
  .linear_gradient(#fff, #f1f2f3);
  .box_shadow();
}

.logo {
  float: left;
  font-family: "Calluna";
  font-size: 21px;
  color: #fff;
  background: #333;
  .linear_gradient(#333, #222);
  line-height: 1;
}

.logo a,
.logo a:hover {
  display: block;
  padding: 12px 7px 7px;
  text-decoration: none;
  color: #fff;
}

.logo a:hover {
  .linear_gradient(#222, #111);
}

.search {
  float: left;
  width: 638px;
  background: #d1d2d3;
  .linear_gradient(#e5e6e7, #f5f6f7);
  border: 1px solid #d1d2d3;
}

.search.active {
  .linear_gradient();
}

.search .fb-suggest {
  display: block;
  -webkit-appearance: none;
  font-size: 16px;
  padding: 9px 5px;
  height: 20px;
  width: 99%;
  border: 0;
  background: transparent;
}

form[role=search] {
  background: transparent url(/search.png) no-repeat right 0px;
}

/*
--------------------------------------------------
HOMEPAGE
--------------------------------------------------
*/

.intro {
  font-size: 16px;
  line-height: 1.6;
  margin: 25px 0;
  color: #666;
}

.category-list {
  list-style: none;
  margin-right: -62px;
}

.category-list-item {
  float: left;
  text-align: center;
  background: #fff;
  width: 210px;
  min-height: 225px;
  margin: 0 57px 30px 0;
  border-left: 5px solid #999;
  .box_shadow();
  .transition(all, 0.1s, linear, 0.1s);
}

.category-list-item:hover {
  cursor: pointer;
  /*-webkit-transform: scale(1.02);*/
  .box_shadow(0,0,8px, #999);
}

.wrapper {
  text-align: left;
  padding: 10px;
}

.c-0 { border-color: #cc0066; }
.c-1 { border-color: #699; }
.c-2 { border-color: #551a8b; }
.c-3 { border-color: #11c; }
.c-4 { border-color: #963; }
.c-5 { border-color: #f60; }
.c-6 { border-color: #008000; }
.c-7 { border-color: #fc0; }
.c-8 { border-color: #0085c3; }

.category-title {
  text-align: center;
  font-family: 'Calluna';
  font-size: 16px;
  color: #222;
  padding-bottom: 100px;
  background: url(/icons.png) no-repeat -1000px -1000px;
  opacity: 0.8;
  .transition(all, 0.1s, linear, 0.1s);
}

a.section-link,
a.section-link:hover {
  color: #222;
  text-decoration: none;
}

.category-list-item:hover .category-title {
  opacity: 1;
}

.common .category-title {
  background-position: center -595px;
}

.music .category-title {
  background-position: center -465px;
}

.people .category-title {
  background-position: center 40px;
}

.places .category-title {
  background-position: center -85px;
}

.events .category-title {
  background-position: center -340px;
}

.reviews-popularity .category-title {
  background-position: center -210px;
}

.recipes .category-title {
  background-position: center -980px;
}

.products .category-title {
  background-position: center -1100px;
}

.tv-movies .category-title {
  background-position: center -720px;
}

.books .category-title {
  background-position: center -845px;
}

.category-sub-title {
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}

.category-sub-list {
  list-style: none;
  font-size: 12px;
}


/*
--------------------------------------------------
HOMEPAGE
--------------------------------------------------
*/

.type-list {
  padding-left: 20px;
}

.type-list ul {
  padding-left: 20px;
}

.type-list li {
  padding: 10px 0px;
}

.type-list ul li:last-child,
.type-list ul li:first-child {
  padding-bottom: 0;
}

.type-list h2,
.type-list h3,
.type-list h4 {
  font-size: 18px;
  font-weight: normal;
}

.type-description {
  font-size: 14px;
  color: #777;
}

/*
--------------------------------------------------
TYPE PAGE
--------------------------------------------------
*/

#main {
  float: left;
  width: 56em;
  margin-right: 4em;
}


.aside {
  float: left;
  width: 16em;
  margin-top: 40px;
}

.breadcrumb {
  font-family: 'Calluna';
  font-size: 14px;
  margin: 30px 0 0 8px;
  line-height: 1;
}

.breadcrumb i {
  font-size: 18px;
  font-style: normal;
  display: inline-block;
  padding-right: 8px;
}

.page-title {
  font-family: 'Calluna';
  font-size: 32px;
  margin: 10px 8px;
}

.page-title span {
  font-size: 14px;
  color: #666;
  padding-left: 10px;
}

.type-desc {
  font-size: 14px;
  color: #999;
  margin-bottom: 20px;
  margin-left: 8px;
}

.definition-table {
  width: 100%;
}

.definition-table thead th {
  border-bottom: 2px solid #333;
  padding-bottom: 6px;
  font-size: 14px;
  line-height: 1;
}

.definition-table thead th:first-child {
  padding-left: 8px;
}

.definition-table thead.supertype th {
  background: #babec2;
  border: 0;
  font-size: 12px;
  padding: 4px 8px;
}

.supertype .prop-name,
.supertype .prop-ect,
.supertype .prop-desc {
  background: #e1e1e1;
}

.prop-name,
.prop-ect,
.prop-desc {
  vertical-align: top;
  font-size: 14px;
  padding: 6px 4px;
  border-bottom: 1px solid #ccc;
  background: #f1f1f1;
}

.prop-name {
  font-weight: bold;
  padding-left: 8px;
}

.prop-ect {
  min-width: 130px;
}

.prop-desc {
  font-size: 12px;
}

.js .enumerated-values {
  display: none;
}

.enumeration-toggle {
  display: block;
}

.enumerated-list {
  list-style: none;
}

.type-pivot {
  padding-left: 35px;
  margin-bottom: 20px;
  font-size: 12px;
}

.type-pivot h3 {
  font-weight: bold;
  color: #333;
}

.type-pivot p {
  color: #666;
  margin-bottom: 10px;
}

.type-pivot ul {
  list-style: none;
}

.type-pivot.broad {
  background: url(/up-arrow.png) no-repeat left 2px;
}

.type-pivot.narrow {
  background: url(/down-arrow.png) no-repeat left 4px;
}
